<template>
	<view class="container">
		<!-- 轮播图区域 -->
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(image, index) in images" :key="index">
				<image class="swiper-image" :src="require(`@/static/${image}`)" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 欢迎词和广告词区域 -->
		<view class="welcome-section">
			<view class="header">
				<text class="title">Welcome to Milk Tea Ordering</text>
			</view>
			<view class="ad-slogan">
				<text class="slogan">Enjoy Delicious Milk Tea, Ordering is More Convenient!</text>
				<text class="ad-text">Advertisement: New Arrivals, Limited Time Offer, Come and Taste!</text>
			</view>
			<view class="content">
				<button type="primary" @click="goToIndexPage">Enter</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		navigateTo
	} from '@dcloudio/uni-app';

	// 使用图片名称数组，图片存放在static文件夹下
	const images = [
		'w1.png',
		'w2.png',
		'w3.png' // 可以继续添加更多图片名称
	];

	const goToIndexPage = () => {
		navigateTo({
			url: '/pages/index/index' // 假设您的首页（index页面）路径是 /pages/index/index
		});
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 20px;
		overflow: hidden;
		box-sizing: border-box;
		/* 确保padding不会增加元素的总宽度和高度 */
	}

	.swiper {
		width: 100%;
		height: 300px;
		/* 根据需要调整轮播图的高度 */
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.welcome-section {
		margin-top: 20px;
		/* 根据需要调整欢迎词和广告词区域与轮播图之间的间距 */
		text-align: center;